<template>
    <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{age}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">年龄+1</button>
      <button @click="showTel">点我查看联系方式</button>
    </div>
  </template>
  
<script lang="ts">
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  import {ref} from 'vue'
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = ref('张三')
  let age = ref(18)
  let tel = '13888888888'

  // 方法
  function changeName(){
    name.value = '李四'//
  }
  function changeAge(){
    console.log(age)
    age.value += 1 
  }
  function showTel(){
    alert(tel)
  }
</script>